import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'

export default function Home() {
  const navigate =   useNavigate()
const newsHandle = ()=>{
  navigate('/main/home/news/002?name=张三&age=18',{
    state:{
      data:[
        {id:'001',item:'新闻1'},
        {id:'002',item:'新闻2'},
        {id:'003',item:'新闻3'},
        {id:'004',item:'新闻4'},
      ]
    }
  })
}
//编程式路由
//state传参
//params传参
//path传参

const musicHandle = ()=>{
  navigate('/main/home/music/001?name=张三&age=18',{
    state:{
      data:[
        {id:'001',item:'歌曲1'},
        {id:'002',item:'歌曲2'},
        {id:'003',item:'歌曲3'},
        {id:'004',item:'歌曲4'},
      ]
    }
  })
}

  return (
    <div>
      <button onClick={newsHandle}>news</button>
      <button onClick={musicHandle}>music</button>
      <Outlet/>
    </div>
  )
}

